<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人资料</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css">
</head>
<link rel="stylesheet" href="../static/css/dropzone.min.css" th:href="@{/css/dropzone.min.css}"/>
<link rel="stylesheet" href="../static/css/basic.min.css" th:href="@{/css/basic.min.css}"/>
<link rel="stylesheet" href="../static/css/file_window.css" th:href="@{/css/file_window.css}"/>
<script src="/js/dropzone.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>

  <!--自定义弹窗:上传头像窗口-->
  <div class="widget widget1"  id="window" hidden="hidden">
    <div class="body">
      <div class="msg">上传新头像</div>
      <div id="dropz" class="dropzone"></div>
      <div class="btns">
        <a href="javascript:void(0);" class="btn-cancel" id="btn_cancel">取 消</a>
        <a href="javascript:void(0);" class="btn-confirm" id="btn_ok">上 传</a>
      </div>
    </div>
  </div>

  <!--导航-->
  <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ></nav>

  <!--中间内容-->
  
  <div  class="m-container m-padded-tb-big">
    <div class="ui container">

      <div class="ui stackable">
        <div class="">
          <!--header-->
          <div class="ui top attached segment">
            <div class="ui middle aligned two column grid">
              <div class="column">
                <h3 class="ui teal header">修改资料</h3>
              </div>
              <div class="right aligned column">
              </div>
            </div>
          </div>
          <!--content-->
          <div class="ui attached segment">
            <div class="ui grid">
              <div class="ui eight wide column centered">
                <div class="ui m-margin-bottom-small " style="height: 0px;">
                  <div class="ui center aligned image segment  m-margin-top-large" style="width: 150px; margin-left: -180px">
                    <a class="ui link" href="#">
                      <img  class="ui  circular image" th:src="${session.user.avatar}">
                      <input type="hidden" name="avatar" th:value="${avatar}">
                    </a>
                    <br>
                    <button id="rollback" class="ui inverted blue button m-mobile-wide">修改头像</font></font></button>
                  </div>
                </div>
                <h4 class="ui dividing header">账号信息</h4>
                <div class="ui top">
                  <div class="ui">
                    <h5 class="ui header">用户名：<span th:text="${session.user.username}">788155</span></h5>
                    <p class="ui">创建日期：<span th:text="${session.user.createTime}">2020-06-01</span></p>
                  </div>
                </div>
                <br>
                <br>
                <form class="ui form" id="info-form" th:object="${user}" th:action="@{/myInfo}" method="post">
                  <h4 class="ui dividing header">基本资料</h4>
                  <div class="field">
                    <label>昵称</label>
                      <div class="field">
                        <input type="text" name="nickname" placeholder="输入你的昵称" th:value="*{nickname}">
                      </div>
                  </div>
                  <div class="field">
                    <label>邮箱</label>
                      <div class="field">
                        <input type="text" name="email" placeholder="输入你的邮箱" th:value="*{email}">
                      </div>
                  </div>
                  <h4 class="ui dividing header">安全资料</h4>
                  <div class="field">
                    <label>密码</label>
                      <div class="field">
                        <input type="password" name="password" placeholder="输入你的新密码，为空不修改" th:value="*{password}">
                      </div>
                  </div>
                  <div class="field">
                    <label>确认密码</label>
                      <div class="field">
                        <input type="password" name="password-confirm" placeholder="重复输入密码">
                      </div>
                  </div>

                  <div class="ui error mini message"></div>
                  <button type="button" id="save-btn" class="ui red button">保存修改</button>
                </form>
                <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
                  <i class="close icon"></i>
                  <div class="header">提示：</div>
                  <p th:text="${message}">恭喜，操作成功！</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive"></footer>

  <!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <!--/*/</th:block>/*/-->

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });
    
    $('.ui.dropdown').dropdown({
      on : 'hover'
    });

    $('.wechat').popup({
      popup : $('.wechat-qr'),
      position: 'bottom center'
    });
    $('.qq').popup();

    $('#save-btn').click(function () {
      $('#info-form').submit();
    });

    //消息提示关闭初始化
    $('.message .close')
            .on('click', function () {
              $(this)
                      .closest('.message')
                      .transition('fade');
            });

  $('.ui.form').form({
    fields : {
      username : {
        identifier: 'email',
        rules: [{
          type : 'email',
          prompt: '请输入正确的邮箱地址'
        }]
      },
      password : {
        identifier: 'password',
        rules: [{
          type : 'regExp',
          value: /^\w{6,16}$|^.{0}$/,
          prompt: '请输入正确的密码（只能输入字母数字，长度6-16位）'
        }]
      },
	    passConfirm : {
        identifier: 'password-confirm',
        rules: [{
          type : 'match[password]',
          prompt: '请输入完全重复的确认密码'
        }]
      }
    }
  });
  </script>
  <script type="text/javascript">
    $(function(){
      $('#rollback').click(function(){
        $('#window').removeAttr('hidden');
      })
      //确认
      $('#btn_ok').click(function(){
        $('#window').attr('hidden','hidden');
        myDropzone.processQueue();
        //一些操作
      })
      //取消
      $('#btn_cancel').click(function(){
        $('#window').attr('hidden','hidden');
        myDropzone.removeAllFiles();
      })
    })
  </script>

  <!--处理上传图片-->
  <script>
    var myDropzone = new Dropzone("#dropz", {
      url: "/upload/uploadUserImg",
      dictDefaultMessage: '拖动图片文件至此或者点击上传',
      dictFileTooBig:"上传文件过大！",
      dictMaxFilesExceeded:'请勿上传多张照片',
      dictInvalidInputType:'请上传.jpg,.jpeg,.png格式图片',
      autoProcessQueue:false,
      paramName: "file", // 传到后台的参数名称
      maxFiles:1,//最多上传数量
      maxFilesize:10,
      acceptedFiles: ".jpg,.jpeg,.png",//支持文件格式
      init: function () {
        var myDropzone = this;
        myDropzone.on("success", function (file, data) {
          // 上传成功触发的事件
          //alert("上传成功");
          alert("头像更新成功，新头像外链为：【"+data.url+"】");
          location.reload();//刷新页面获取新头像
          console.log("QQ头像更新成功，头像外链："+data.url);
        });
        myDropzone.on('error', function (files, response) {
          //alert("服务器错误，文件上传失败，请刷新重试！");
        });
      }
    });
  </script>
</body>
</html>